<template>
  <div>
    <el-card shadow="never">
      <header-title title="摊位管理"></header-title>
    </el-card>
    <el-card shadow="never">
      <el-row>
        <el-col :span="20">
          <div>
            <el-input v-model="searchForm.searchName" placeholder="可输入商户名称/摊位编号/联系方式" size="small" style="margin-left: 15px;width: 260px;"></el-input>
            <el-select v-model="searchForm.partition" placeholder="请选择区域" size="small" style="width: 120px;">
              <el-option v-for="item in partitions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <el-select v-model="searchForm.status" placeholder="请选择状态" size="small" style="width: 120px;">
              <el-option :key="0" label="全部" :value="0"></el-option>
              <el-option :key="1" label="闲置" :value="1"></el-option>
              <el-option :key="2" label="出租中" :value="2"></el-option>
            </el-select>
            <el-select v-model="searchForm.stallBusinessType" placeholder="请选择主营类型" size="small">
              <el-option v-for="item in topProductTypeData" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <el-button @click="search" class="button" size="small" round icon="el-icon-search">查询</el-button>
          </div>
        </el-col>
        <el-col :span="4">
          <el-button @click="showNewStallDialog" class="button" size="small" round>增加摊位</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <div>
        <el-table :data="stallData" v-loading="loading" style="width: 100%">
          <el-table-column prop="partitionName" label="区域"></el-table-column>
          <el-table-column prop="stallName" label="摊位编号"></el-table-column>
          <el-table-column prop="stallBusinessTypeName" label="摊位类型名称"></el-table-column>
          <el-table-column prop="areas" label="面积"></el-table-column>
          <el-table-column prop="stallBusinessName" label="商户名称"></el-table-column>
          <!-- <el-table-column prop="stallMoney" label="摊位租金"></el-table-column> -->
          <el-table-column prop="statusStr" label="摊位状态"></el-table-column>
          <!-- <el-table-column prop="status" label="摊位状态Code"></el-table-column> -->
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <div v-show="scope.row.status != 2">
              <el-button @click="showEditStallDialog(scope.row)" type="text" style="color:#3dc2c2;">编辑</el-button>
              <el-button @click="remove(scope.row.stallId)" type="text" style="color:#f7674a;">删除</el-button>
              </div>
              <div v-show="scope.row.status == 2">
              <el-button disabled type="text">编辑</el-button>
              <el-button disabled type="text">删除</el-button>
              </div>
            </template>
          </el-table-column>
          <div slot="empty"><img src="../../assets/blank_tip_page/blank_tip_page.png" alt=""></div>
        </el-table>
        <el-pagination
          :page-size="perPage"
          :current-page="page"
          :total="total"
          @current-change="changeStallPage"
          style="margin-top: 15px;"
          background
          layout="prev, pager, next"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog width="360px" title="添加摊位" :visible.sync="newStallForm.show" @close="close">
      <div>
        <el-form :model="newStallForm.modal" label-width="68px">
          <el-form-item label="主营">
            <el-select v-model="newStallForm.modal.stallBusinessType" placeholder="请选择主营类型" size="small">
              <el-option v-for="item in topProductTypeData" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="区域">
            <el-select v-model="newStallForm.modal.partitionId" placeholder="请选择区域" size="small">
              <el-option v-for="item in newStallForm.partitions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="type" label="自动">
            <el-switch
              active-value="2"
              inactive-value="1"
              v-model="newStallForm.modal.type">
            </el-switch>
          </el-form-item>
          <el-form-item v-show="newStallForm.modal.type!=2" label="名称" prop="stallName">
            <el-input style="width:190px" v-model="newStallForm.modal.stallName"></el-input>
          </el-form-item>
          <el-form-item v-show="newStallForm.modal.type!=2" label="面积" prop="stallName">
            <el-input style="width:190px" v-model="newStallForm.modal.areas"></el-input>
          </el-form-item>
          <el-form-item v-show="newStallForm.modal.type==2" label="前缀" prop="prefix">
            <el-input style="width:190px" size="small" v-model="newStallForm.modal.prefix"></el-input>
          </el-form-item>
          <el-form-item v-show="newStallForm.modal.type==2" label="开始序号" prop="prefix">
            <el-input-number style="width:190px" controls-position="right" size="small" :min="1" v-model="newStallForm.modal.begin"></el-input-number>
          </el-form-item>
          <el-form-item v-show="newStallForm.modal.type==2" label="数量" prop="prefix">
            <el-input-number style="width:190px" controls-position="right" size="small" :min="1" v-model="newStallForm.modal.length"></el-input-number>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">添加摊位</el-button>
      </div>
    </el-dialog>
    <el-dialog width="360px" title="编辑摊位" :visible.sync="editStallForm.show" @close="close">
      <div>
        <el-form :model="editStallForm.modal" label-width="68px">
          <el-form-item label="主营">
            <el-select v-model="editStallForm.modal.stallBusinessType" placeholder="请选择主营类型" size="small">
              <el-option v-for="item in topProductTypeData" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="区域">
            <el-select v-model="editStallForm.modal.partitionId" placeholder="请选择区域" size="small">
              <el-option v-for="item in newStallForm.partitions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="名称" prop="stallName">
            <el-input style="width:190px" v-model="editStallForm.modal.stallName"></el-input>
          </el-form-item>
          <el-form-item label="面积" prop="stallName">
            <el-input style="width:190px" v-model="editStallForm.modal.areas"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import HeaderTitle from "@/components/HeaderTitle"
import { mapState } from "vuex"
export default {
  name: 'Stall',
  components: {
    HeaderTitle
  },
  data(){
    return {
      loading: true,
      searchForm:{
        searchName:"",
        partition:"",
        status:0,
        stallBusinessType: '',
      },
      topProductTypeData: [],
      newStallForm: {
        partitions:[],
        show: false,
        modal: {
          partitionId:"",
          type: 1,
          stallBusinessType: ''
        }
      },

      editStallForm: {
        show: false,
        modal: {
          partitionId:"",
          type: 1,
          stallBusinessType: '',
          stallBusinessTypeName: ''
        }
      },

      partitions:[],
      stallData: [],
      perPage: 10, // 每页显示10条
      page: 1, // 当前页
      total: 0,

      stallTypeData: [] // 摊位主营类型数组
    }
  },
  computed:{
    ...mapState('app',['marketId'])
  },
  mounted(){
    this.fetchStalls(this.searchForm.stallBusinessType, this.searchForm.searchName, this.searchForm.partition, this.searchForm.status, this.perPage, this.page)
    this.fetchPartitions()
    this.getBusinessType()
  },
  watch: {
    '$store.state.app.marketId'(val, oldVal){
      this.fetchStalls(this.searchForm.stallBusinessType, this.searchForm.searchName, this.searchForm.partition, this.searchForm.status, this.perPage, this.page)
      this.fetchPartitions()
      this.getBusinessType()
    }
  },
  methods:{
    // 获取商户主营类型
      getBusinessType(){
        this.$store.dispatch('equipment/fetchBusinessType').then(
          data => {
            this.topProductTypeData = data
          }
        ).catch(err => {
          this.topProductTypeData = []
        })
      },
    // 获取摊位管理列表
    fetchStalls(stallBusinessType,searchName, partitionName, status, perPage, page) {
      this.$store.dispatch('stall/fetchStalls',{stallBusinessType, searchName, partitionName, status, perPage, page}).then(
        data => {
          this.loading = false
          this.stallData = data.items
          this.total = data.total
        }
      ).catch(err => {
        this.loading = false
        this.stallData = []
        this.total = 0
      })
    },
    search(){
      this.page = 1
      this.fetchStalls(this.searchForm.stallBusinessType, this.searchForm.searchName, this.searchForm.partition, this.searchForm.status, this.perPage, this.page)
    },
    changeStallPage(num){
      this.page = num
      this.fetchStalls(this.searchForm.stallBusinessType, this.searchForm.searchName, this.searchForm.partition, this.searchForm.status, this.perPage, this.page)
    },
    // 获取摊位主营类型
    fetchPartitions(){
      this.$store.dispatch('stall/fetchPartitions').then(
        data => {
          this.partitions = data.slice()
          this.newStallForm.partitions = data.slice()
          this.partitions.unshift({id:-1, name:'全部'})
        }
      ).catch(err => {
        this.stallTypeData = []
      })
    },
    // 点击增加摊位
    showNewStallDialog(){
      this.newStallForm.show = true
    },

    showEditStallDialog(row){
      let obj = {}
      obj = this.topProductTypeData.find((item)=>{ // 这里的 topProductTypeData 就是上面的数据源
        return item.id / 1 === row.stallBusinessType //筛选出匹配数据
      })
      this.editStallForm.modal.stallBusinessType = row.stallBusinessTypeName

      this.editStallForm.modal.id = row.stallId,
      this.editStallForm.modal.partitionName = row.partitionName

      for(const partition of this.newStallForm.partitions) {
        if(partition.name == row.partitionName){
          this.editStallForm.modal.partitionId = partition.id
        }
      }
      this.editStallForm.modal.stallName = row.stallName
      this.editStallForm.modal.areas = row.areas
      console.log("edit partition", this.editStallForm.modal)
      this.editStallForm.show = true
    },
    close(){
      this.clear()
    },
    clear(){
      this.newStallForm.modal = {}
      this.editStallForm.modal = {}
    },
    // 提交增加摊位
    submit(){
      for(let partition of this.newStallForm.partitions) {
        if(partition.id == this.newStallForm.modal.partitionId) {
          this.newStallForm.modal.partitionName = partition.name
          break
        }
      }

      this.$store.dispatch("stall/submit", this.newStallForm.modal).then(data=>{
        if(data.code===200){
          this.$message({
            type: 'success',
            message: '操作成功，请刷新！'
          })
          this.fetchStalls(this.searchForm.stallBusinessType, this.searchForm.searchName, this.searchForm.partition, this.searchForm.status, this.perPage, this.page)
        }else{
          this.$message({
            type: 'error',
            message: '操作失败，请重新操作！'
          })
        }
      })
    },
    saveEdit(){
      for(let partition of this.newStallForm.partitions) {
        if(partition.id == this.editStallForm.modal.partitionId) {
          this.editStallForm.modal.partitionName = partition.name
          break
        }
      }

      for(let partition of this.topProductTypeData) {
        if(partition.id == this.editStallForm.modal.stallBusinessType) {
          this.editStallForm.modal.stallBusinessTypeName = partition.name
          break
        }
      }

      this.$store.dispatch("stall/saveEdit", this.editStallForm.modal).then(data=>{
        if(data.code===200){
          this.$message({
            type: 'success',
            message: '操作成功，请刷新！'
          })
          this.fetchStalls(this.searchForm.stallBusinessType, this.searchForm.searchName, this.searchForm.partition, this.searchForm.status, this.perPage, this.page)
        }else{
          this.$message({
            type: 'error',
            message: '操作失败，请重新操作！'
          })
        }
      })
    },
    remove(id){
      this.$store.dispatch("stall/remove", id).then(data=>{
        if(data.code===200){
          this.$message({
            type: 'success',
            message: '操作成功，请刷新！'
          })
          this.fetchStalls(this.searchForm.stallBusinessType, this.searchForm.searchName, this.searchForm.partition, this.searchForm.status, this.perPage, this.page)
        }else{
          this.$message({
            type: 'error',
            message: '操作失败，请重新操作！'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-table__empty-text{
    width: 100%;
  }
.button {
  background: #64d9d6;
  color: #fff;
  margin-left: 40px;
}
</style>

